//点击菜单后负责渲染页面功能的js

var Page = function(api, attributes) {
    this.api = api;
    this.attributes = attributes;
    this.data = {
        "pageSize": 10,
        "pageNum": 1,
        "keyword": $('#keyword').val()
    };

    this.render = function (pageNum) {
        this.data.pageNum = pageNum || this.data.pageNum;
        let that = this;
        curl.post(this.api, this.data, 2, true, function (res) {
            if (res.result === 'success') {
                that.renderTable(res.data);
            } else {
                layer.alert(res.message, {icon: 5});
            }
        }, function () {
            layer.alert('抱歉，出错了', {icon: 5});
        });
    };


    this.renderTable = function (pageInfo) {
        const columns = attributes;
        const tbody = $('#table-body');
        const pagination = $('#Pagination');

        //空数据
        let emptyTd = '<tr><td colspan="6" align="center">抱歉！没有查询到您要的数据！</td></tr>';

        //清空数据
        tbody.empty();
        pagination.empty();

        if (pageInfo == null || pageInfo.list == null || pageInfo.list.length === 0) {
            tbody.append(emptyTd);
            return;
        }
        for (let i = 0; i < pageInfo.list.length; i++) {
            let row = pageInfo.list[i];

            let numberTd = "<td>" + (i + 1) + "</td>";
            let checkboxTd = "<td><input type='checkbox'></td>";

            //操作按钮
            let checkBtn = "<button type='button' class='btn btn-success btn-xs my-btn-assign' data-id='"+ row.id + "'><i class='glyphicon glyphicon-check'></i></button>";
            let pencilBtn = "<button type='button' class='btn btn-primary btn-xs my-btn-edit' data-id='"+ row.id + "'><i class='glyphicon glyphicon-pencil'></i></button>";
            let removeBtn = "<button type='button' class='btn btn-danger btn-xs my-btn-delete' data-id='"+ row.id + "'><i class='glyphicon glyphicon-remove'></i></button>";
            let buttonTd = "<td>" + checkBtn + " " + pencilBtn + " " + removeBtn + "</td>";

            let dataTds = "";
            for (let j = 0; j < columns.length; j++) {
                let dataTd = "<td>" + row[columns[j]] + "</td>";
                dataTds += dataTd;
            }


            let tr = "<tr>" + numberTd + checkboxTd + dataTds + buttonTd + "</tr>";
            tbody.append(tr);
        }

        this.renderPagination(pageInfo);
    };

    this.renderPagination = function (pageInfo) {
        let that = this;
        let totalRecord = pageInfo.total;
        let properties = {
            num_edge_entries: 3,
            num_display_entries: 5,
            callback: function (pageIndex) {
                that.data.pageNum = pageIndex + 1;
                that.data.keyword = $('#keyword').val();
                that.render();
                return false;
            },
            current_page: pageInfo.pageNum - 1,
            prev_text: "上一页",
            next_text: "下一页",
            items_per_page: pageInfo.pageSize
        };

        $("#Pagination").pagination(totalRecord, properties);
    };

    this.searchSubmit = function () {
        this.data.pageNum = 1;
        this.data.keyword = $('#keyword').val();
        this.render();
        return false;
    };
};

